<template>
  <div style="width: 90%; margin: 20px auto">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="imgs" label="图片">
        <template v-slot="scope">
          <img :src="scope.row.imgs" style="width: 100%; height: 100%" />
        </template>
      </el-table-column>
      <el-table-column prop="brand" label="品牌"> </el-table-column>
      <el-table-column prop="company" label="店铺名称"> </el-table-column>
      <el-table-column prop="counts" label="销量"> </el-table-column>
      <el-table-column prop="price" label="价格"> </el-table-column>
      <el-table-column prop="shopnames" label="商品名称"> </el-table-column>
      <el-table-column prop="types" label="类型"> </el-table-column>
      <el-table-column label="操作" width="100">
        <template v-slot="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >删除</el-button
          >
          <el-button type="text" size="small" @click="edit(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; justify-content: center">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <dialogView ref="dialog" />
  </div>
</template>

<script>
import { bossGetShoplist, bossDelShop } from "@/api/login";
import dialogView from "./dialogView.vue";
export default {
  components: {
    dialogView,
  },
  data() {
    return {
      tableData: [],
      parmas: {
        shopnames: "",
        types: "",
        brand: "",
        pageNo: "1",
        pageSize: "10",
      },
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // tableRowClassName({ row, rowIndex }) {
    //   console.log(rowIndex, "99999");
    //   if (rowIndex === 1) {
    //     return "warning-row";
    //   } else if (rowIndex === 3) {
    //     return "success-row";
    //   }
    //   return "";
    // },
    handleClick(row) {
      this.$confirm("是否删除该商品", "提示", {
        type: "warning",
      }).then(() => {
        bossDelShop({ id: row.id }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getList();
          }
        });
      });
    },
    getList() {
      bossGetShoplist(this.parmas).then((res) => {
        console.log(res, "7777");
        if (res.code == 200) {
          this.tableData = res.data.data || [];
          this.total = res.data.total || 0;
        }
      });
    },
    handleCurrentChange(val) {
      this.parmas.pageNo = val;
      this.parmas.brand = "";
      this.parmas.types = "";
      this.parmas.shopnames = "";
      this.getList();
    },
    edit(e) {
      console.log(e, "1111");
      this.$refs.dialog.visible = true;
      this.$refs.dialog.id = e.id;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table__row {
  // height: 100px !important;
}

// ::v-deep .el-table .warning-row {
//   background: oldlace;
// }

// ::v-deep .el-table .success-row {
//   background: #f0f9eb;
// }
</style>
